<template>
    <FrameWork></FrameWork>
    <ContentField>
        <h2 style="text-align:center;">题目修改</h2>
        <form @submit.prevent="modifyPro">
            <div class="mb-3">
                <label  class="form-label">id:</label>
                <span type="text" class="form-control" name="id" id="id" :value="id">{{ id }}</span>
            </div>
            <div class="mb-3">
                <label  class="form-label">题目类型:</label>
                <span type="text" class="form-control" name="proType" id="proType" :value="proType">{{ proType }}</span>
            </div>
            <div class="mb-3">
                <label  class="form-label">题目描述:</label>
                <input type="text" v-model="content" class="form-control" name="content" id="content" required>
            </div>
            <div class="mb-3">
                <label for="exampleInputPassword1" class="form-label">正确的SQL语句:</label>
                <input type="text" v-model="correctSQL" class="form-control" name="correctSQL" id="correctSQL" required>
            </div>
            <span style="color:red; text-align:center; display:block;">{{ error_message }}</span>
            <div class="form-group" style="text-align:center;">
                <button class="btn btn-primary" type="submit" style="width:20%;margin-top:10px;">修改题目</button>
            </div>
        </form>
    </ContentField>
</template>

<script>
import FrameWork from '@/components/admin/FrameWork.vue';
import ContentField from '@/components/commons/ContentField.vue';
import {ref} from 'vue';
import $ from 'jquery';
import {useStore} from 'vuex';
import { useRoute } from 'vue-router';
import router from '@/router/index';


export default{
    name:'ModifyQueryProView',
    components:{
        FrameWork,
        ContentField,
    },
    setup(){
        const store = useStore();
        const route = useRoute();


        let id = route.params.id;
        let proType = 2;
        let content = ref('');
        let correctSQL = ref('');
        let error_message = ref('');

        const getInfoById = (id) => {
            console.log(id);
         $.ajax({
            url: 'http://localhost:8090/sls/defaultProSet/getInfoById',
            type: 'get',
            data: {
                id: id,
            },
            headers: {
                Authorization: "Bearer " +store.state.user.token,
            },
            success(resp){
                console.log(resp);
                content.value = resp.content;
                correctSQL.value = resp.correctSQL;
            },
            error(resp){
                console.log(resp);
            }
         });   
        }

        getInfoById(id);

        const modifyPro = () => {

                $.ajax({
                url: 'http://localhost:8090/sls/defaultProSet/addPro',
                type: 'post',
                data: {
                    id: id,
                    content: content.value,
                    correctSQL: correctSQL.value,
                },
                headers: {
                    Authorization: "Bearer " +store.state.user.token,
                },
                success(resp){
                    console.log(resp);
                    if(resp.error_message === 'success'){
                        router.push({name: 'A_addSet', params: {proType:2}});
                    }
                    else{
                        error_message.value = resp.error_message;
                    }
                },
                error(resp){
                    console.log(resp);
                }
                });   

            }

        return {
            getInfoById,
            modifyPro, 
            id,
            proType,
            content,
            correctSQL,
            error_message,
        }

    }
}
</script>

<style scoped>
</style>